<template>
  <view class="calendar-content" style="background-color: #f2f3f6;">
    <view class="calendar-content" v-if="showCalendar">
      <view>
        <!-- 插入模式 -->
        <uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change"
          @monthSwitch="monthSwitch" />

      </view>
    </view>
    <view class="list">
      <view class="item" @tap="goDetail(item.order_sn)" v-for="(item,i) in list1" :key="i">
        <view class="padding-sm" style="font-size: 28rpx;padding: 24rpx;">
          合作的商家
        </view>
        <view class="itemContent">
          <view class="title">
            <view class="name" style="font-weight: 550;">
              {{item.one_order.shop_name}}
            </view>
            <view class="money">
              <span style="font-size: 24rpx;">￥{{item.price}}</span>
            </view>
          </view>
          <view class="lableBoxS">
            <view style="background-color: #DDE3F9;">
              {{item.one_order.city_data}}
            </view>
            <view style="background-color: #FFDFC1;">
              {{item.one_order.order_category.category_name}}
            </view>
            <view style="background-color: #CAE5BD;">
              {{item.one_order.order_content_type.content_type_name}}
            </view>
          </view>

          <view class="bottomBox">
            <view class="avatar">
              <image style="width: 28rpx;height: 28rpx;" src="../../static/img/dh.png" mode=""></image>
            </view>
            <view class="userName">
              商家电话
            </view>
            <view class="identityBoxS">
              <view class="">
                {{item.one_order.order_detail.order_contacts_phone}}
              </view>
            </view>

          </view>
          <view class="u-flex-between margin-top-sm">
            <view class="btn" style="font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
flex: 1;
font-weight: 400;
color: #6E7480;">
              <view class="">
                探店门店：<span v-if="item.one_order_store.store_name">{{item.one_order_store.store_name}}</span>
                <span v-else>无</span>
              </view>
              <view class="">
                探店时间：<span v-if="item.time">{{item.time}}</span><span v-else>无</span>
              </view>
              <view class="">
                带货力等级：<span v-if="item.sales_level">Lv{{item.sales_level}}</span><span v-else>无</span>  
              </view>
            </view>
            <button class="btnNone" style="display: flex;align-items: top;" open-type="share" catchtap="share"
              @tap.stop="share()">
              <image class="shareImg" style="width: 52rpx;height: 52rpx;" src="../../static/img/Frame.png" mode="">
              </image>
            </button>
          </view>
        </view>
      </view>
    </view>

    <view class="listsss">
      <view class="item" v-for="(item,index) in list" :key="index">
        <view class="padding-sm" style="font-size: 28rpx;padding: 24rpx;color: rgba(0,0,0,0.8);">
          合作的达人
        </view>
        <view class="itemContent">
          <view class="title">
            <view class="name" style="font-weight: 550;font-size: 32rpx;">
              {{item.anchor_card.dy_nickname}}
              <template v-if="item.anchor_card.gender ==1">
                <image src="../../static/img/man.png" mode=""></image>
              </template>
              <template v-if="item.anchor_card.gender ==2">
                <image src="../../static/img/women.png" mode=""></image>
              </template>
            </view>
            <view class="">
              <image style="width: 28rpx; height: 28rpx;" src="../../static/img/dh.png" mode=""></image>
              {{item.anchor_card.anchor_card_detail.phone}}
            </view>

          </view>

          <view class="lableBoxS">
            <view style="background-color: #DDE3F9;">
              {{item.anchor_card.city}}{{item.anchor_card.area}}
            </view>
            <view style="background-color: #FFDFC1;" v-for="(i,index) in item.anchor_card.category_data">
              {{i}}
            </view>

            <view style="background-color: #CAE5BD;">
              {{item.anchor_card.order_content_type.content_type_name}}
            </view>

          </view>
          <view class="numbers">
            <view class="numberBox">
              <view class="lable">
                粉丝
              </view>
              <view class="num">
                {{item.anchor_card.fans_num}}
              </view>
            </view>
            <view class="numberBox" style="text-align: center;">
              <view class="lable">
                内容力等级
              </view>
              <view class="num golden">
                Lv{{item.anchor_card.content_level}}
              </view>
            </view>
            <view class="numberBox" style="text-align: right;">
              <view class="lable">
                带货力等级
              </view>
              <view class="num golden">
                Lv{{item.anchor_card.sales_level}}
              </view>
            </view>


          </view>
          <view class="u-flex-between margin-top-sm">
            <view class="btn" style="font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #6E7480;">
              <view class="">
                探店门店：<span v-if="item.one_order_store.store_name">{{item.one_order_store.store_name}}</span>
                <span v-else>无</span>
              </view>
              <view class="">
                探店时间：{{item.time}}
              </view>
              <view class="">
                带货力等级：Lv{{item.sales_level}}
              </view>
            </view>
            <button class="btnNone" style="display: flex;align-items: top;" open-type="share" catchtap="share"
              @tap.stop="share()">
              <image class="shareImg" style="width: 52rpx;height: 52rpx;" src="../../static/img/Frame.png" mode="">
              </image>
            </button>
          </view>
        </view>
      </view>


    </view>







  </view>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        list: [],
        list1: [],
        showCalendar: false,
        info: {
          lunar: true,
          range: true,
          insert: false,
          selected: []
        },

      }
    },

    async onShow() {
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth() + 1;
      var day = today.getDate();
      var currentDate = year + "-" + month + "-" + day;
      this.change(currentDate)
      const res = await uni.$http.post('user/order_calendar_date')
      console.log('5555', res.data.data);
      let arr = Object.values(res.data.data)
      arr.forEach(v => {
        // if (this.info.selected.length > 30) return
        this.info.selected.push({
          date: v,
        })
      });

    },
    onReady() {
      this.$nextTick(() => {
        this.showCalendar = true
      })
    },

    methods: {
      open() {
        this.$refs.calendar.open()
      },
      close() {
        console.log('弹窗关闭');
      },
      async change(e) {
        console.log('change 返回:', e.fulldate)
        // 3、创建商单门店信息
        const obj = {
          date: e.fulldate
        }
        const {
          data: res
        } = await uni.$http.post('user/order_calendar_list', obj)
        console.log(res.data);
        this.list = res.data.order_data,
          // shangjia
          this.list1 = res.data.join_data
      },

      confirm(e) {
        console.log('confirm 返回:', e)
      },
      monthSwitch(e) {
        console.log('monthSwitchs 返回:', e)
      }
    }
  }
</script>
<style lang="scss">
  /deep/.uni-calendar-item--isDay.data-v-6097fd5b {
    background-color: #7D81A9 !important;
  }

  /deep/.uni-calendar-item__weeks-box-circle.data-v-6097fd5b {
    position: absolute !important;
    bottom: 5rpx !important;
    right: 5px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 8px !important;
    background-color: #7D81A9 !important;
  }

  .list {
    .item {
      padding-bottom: 10rpx;
      width: 686rpx;
      // height: 294rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin: 24rpx auto;

      .stateImg {
        width: 92rpx;
        height: 36rpx;
      }

      .itemContent {
        padding: 0 24rpx;

        .title {
          display: flex;
          align-items: center;
          font-size: 28rpx;

          .name {
            width: 380rpx;
            font-size: 32rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .money {
            flex: 1;
            text-align: right;
            color: #EAA04A;
            font-size: 36rpx;
          }
        }

        .lableBoxS {
          display: flex;
          color: rgba(0, 0, 0, 0.6);
          font-size: 20rpx;
          margin-top: 14rpx;
          margin-bottom: 18rpx;

          view {
            height: 32rpx;
            line-height: 32rpx;
            padding: 0 12rpx;
            border-radius: 22rpx;
            margin-right: 8rpx;
          }
        }

        .time {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.6);
          margin-bottom: 24rpx;
        }

        .bottomBox {
          display: flex;
          align-items: center;
          height: 52rpx;

          .avatar {
            width: 36rpx;
            height: 36rpx;
            border-radius: 18rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .userName {
            font-size: 24rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            color: rgba(0, 0, 0, 0.6);
            margin: 0 8rpx;
          }

          .identityBoxS {
            flex: 1;
            display: flex;

            view {
              // width: 52rpx;
              height: 24rpx;
              padding: 0 8rpx;
              line-height: 22rpx;
              text-align: center;
              margin-right: 4rpx;
              // background-color: #B0A5FF;
              // color: #FFFFFF;
              font-size: 18rpx;
              border-radius: 10rpx 0 10rpx;
            }
          }

          .btnS {
            display: flex;

            .btn {
              width: 128rpx;
              height: 52rpx;
              line-height: 52rpx;
              text-align: center;
              background: #7D81A9;
              border-radius: 40rpx;
              font-size: 24rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
              margin-right: 16rpx;
            }

            .shareImg {
              width: 52rpx;
              height: 52rpx;
            }
          }
        }
      }
    }
  }


  .listsss {
    .item {
      width: 686rpx;
      padding-bottom: 26rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin: 24rpx auto;

      .stateImg {
        width: 92rpx;
        height: 36rpx;
      }


      .itemContent {
        padding: 0 24rpx;

        .title {
          display: flex;
          align-items: center;

          .name {
            flex: 1;
            width: 380rpx;
            font-size: 32rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 550;
            color: #000000;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            image {
              display: inline-block;
              width: 24rpx;
              height: 24rpx;
              margin-left: 8rpx;
            }
          }

          .btns {

            display: flex;
            font-size: 24rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;

            .btn {
              width: 128rpx;
              height: 52rpx;
              line-height: 52rpx;
              text-align: center;
              background: #7D81A9;
              border-radius: 40rpx;
              margin-right: 16rpx;
            }

            .frame {
              width: 52rpx;
              height: 52rpx;

              image {
                width: 52rpx;
                height: 52rpx;
              }
            }
          }
        }

        .lableBoxS {
          display: flex;
          color: rgba(0, 0, 0, 0.6);
          font-size: 20rpx;
          margin-top: 20rpx;
          margin-bottom: 18rpx;

          view {
            height: 32rpx;
            line-height: 32rpx;
            padding: 0 12rpx;
            margin-right: 8rpx;
          }
        }

        .numbers {
          display: flex;
          align-items: center;
          // flex-wrap: wrap;
          justify-content: space-between;

          .numberBox {
            // width: 33%;
            display: flex;
            align-items: center;
            text-align: center;
          }

          .lable {
            font-size: 24rpx;
            color: #6E7480;
            margin-right: 8rpx;
          }

          .num {
            font-size: 32rpx;
            color: #000000;
          }

          .golden {
            font-size: 32rpx;
            color: #EAA04A;
          }
        }

        .bottomBox {
          display: flex;
          align-items: center;
          height: 52rpx;
          margin-top: 14rpx;

          .avatar {
            width: 44rpx;
            height: 44rpx;
            border-radius: 22rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .userId {
            font-size: 24rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            color: #6E7480;
            margin: 0 8rpx;

            .copyImg {
              width: 28rpx;
              height: 28rpx;
              margin-left: 8rpx;
            }
          }

          .btnS {
            display: flex;

            .btn {
              width: 128rpx;
              height: 52rpx;
              line-height: 52rpx;
              text-align: center;
              background: #7D81A9;
              border-radius: 40rpx;
              font-size: 24rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
              margin-right: 16rpx;
            }

            .shareImg {
              width: 52rpx;
              height: 52rpx;
            }
          }
        }
      }
    }
  }
</style>